import React, { Component } from 'react';
import { Dialog, Button, Form, Input, Field, NumberPicker, Switch, Select, Icon } from '@alifd/next';
import FoundationSymbol from '@icedesign/foundation-symbol';
import iconTypes from './Icons';

const FormItem = Form.Item;

export default class EditDialog extends Component {
  static displayName = 'EditDialog';

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      dataIndex: null,
    };
    this.field = new Field(this);
  }
  componentWillMount() {
    const record = this.props.record;
    this.oth_fields = {
      sort: record.sort === null ? 0 : record.sort,
      useable: record.useable === null ? 0 : record.useable,
      icon: record.icon,
      type: record.type,
    };
  }
  handleSubmit = () => {
    this.field.validate((errors, values) => {
      if (errors) {
        console.log('Errors in form!!!');
        return;
      }
      const { dataIndex } = this.state;
      values.sort = this.oth_fields.sort;
      values.useable = this.oth_fields.useable;
      values.type = this.oth_fields.type;
      values.icon = this.oth_fields.icon;
      if (values.useable === undefined) {
        values.useable = 0;
      }
      this.props.getFormValues(dataIndex, values);
      this.setState({
        visible: false,
      });
    });
  };

  onOpen = (index, record) => {
    const keys = Object.keys(record);
    keys.forEach((key) => {
      if (record[key] === null) {
        record[key] = undefined;
      }
    });
    this.field.setValues({ ...record });
    this.setState({
      visible: true,
      dataIndex: index,
    });
  };

  onClose = () => {
    this.setState({
      visible: false,
    });
  };

  onSortChange = (value) => {
    this.oth_fields.sort = value;
  }

  onIconSelectChange =(value) => {
    this.oth_fields.icon = value;
  }
  onUseableChange = (checked) => {
    this.oth_fields.useable = (checked === true ? 0 : 1);
  }
  onSelectChange =(value) => {
    this.oth_fields.type = value;
  }

  render() {
    const init = this.field.init;
    const { index, record } = this.props;
    const formItemLayout = {
      labelCol: {
        fixedSpan: 6,
      },
      wrapperCol: {
        span: 14,
      },
    };

    const checked = record.useable == 0;
    const Option = Select.Option;
    const type = record.type;
    const icon = record.icon;
    const icons = iconTypes.map(item => {
      return {
        label: <div><FoundationSymbol type={item} size="small" />&nbsp;{item}</div>,
        value: item,
        originLabel: item,
      };
    });
    return (
      <div style={styles.editDialog}>
        <Button type="primary" size="small" onClick={() => this.onOpen(index, record)}>
          <Icon type="edit" />
        编辑
        </Button>
        <Dialog
          style={{ width: 640 }}
          visible={this.state.visible}
          onOk={this.handleSubmit}
          closeable="esc,mask,close"
          onCancel={this.onClose}
          onClose={this.onClose}
          title="编辑"
        >
          <Form field={this.field}>
            <FormItem label="菜单名称：" {...formItemLayout}>
              <Input
                {...init('name', {
                  rules: [{ required: true, message: '必填选项' }],
                })}
              />
            </FormItem>

            <FormItem label="链接地址：" {...formItemLayout}>
              <Input
                {...init('href')}
              />
            </FormItem>

            <FormItem label="权限标识：" {...formItemLayout}>
              <Input
                {...init('permission')}
              />
            </FormItem>

            <FormItem label="菜单类型：" {...formItemLayout}>
              <Select id="basic-demo" onChange={this.onSelectChange} style={{ width: 160 }} defaultValue={type}>
                <Option value="menu">菜单</Option>
                <Option value="button">按钮</Option>
              </Select>
            </FormItem>

            <FormItem label="菜单图标：" {...formItemLayout}>
              <Select onChange={this.onIconSelectChange}
                fillProps="originLabel"
                placeholder="选择图标"
                defaultValue={icon}
                dataSource={icons}
                style={{ width: 160 }}
              />
            </FormItem>
            <FormItem label="本级排序：" {...formItemLayout}>
              <NumberPicker type="inline" defaultValue={this.oth_fields.sort} onChange={this.onSortChange} />
            </FormItem>
            <FormItem label="是否启用：" {...formItemLayout}>
              <Switch defaultChecked={checked} onChange={this.onUseableChange} />
            </FormItem>
          </Form>
        </Dialog>
      </div>
    );
  }
}

const styles = {
  editDialog: {
    display: 'inline-block',
    marginRight: '5px',
  },
};
